@use 'sass:math';
@use '@material/theme/index' as theme;
@use '@material/feature-targeting/index' as feature-targeting;

// Default styles
$section-height: 56px !default;
$section-padding-vertical: 16px !default;
$section-padding-horizontal: 16px !default;
$fab-diameter: 56px !default;
$inset-fab-padding: 8px !default;
$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;

@mixin core-styles($query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);
  $feat-structure: feature-targeting.create-target($query, structure);

  .smui-bottom-app-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    --smui-bottom-app-bar--fab-offset: 0px;

    &.smui-bottom-app-bar--fixed,
    &.smui-bottom-app-bar--standard {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }

    & > .smui-bottom-app-bar__section {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      padding: $section-padding-vertical $section-padding-horizontal;
      height: $section-height;
      box-sizing: border-box;
      flex-grow: 1;
      flex-basis: 0;
      overflow: visible;

      .mdc-icon-button {
        margin-top: -12px;
      }

      .mdc-fab {
        position: relative;
        top: calc(
          var(--smui-bottom-app-bar--fab-offset, 0px) -
            ($section-padding-vertical + math.div($fab-diameter, 2))
        );
      }

      &:first-child {
        justify-content: start;

        .mdc-icon-button:first-child {
          margin-inline-start: -12px;
        }
      }

      &:last-child {
        justify-content: end;

        .mdc-icon-button:last-child {
          margin-inline-end: -12px;
        }
      }

      &.smui-paper.smui-bottom-app-bar__section--fab-inset {
        @include inset-color(theme.$primary, 50%, $query);

        &:first-child {
          @include inset-color(
            theme.$primary,
            $section-padding-horizontal + $inset-fab-padding +
              math.div($fab-diameter, 2),
            $query
          );

          .mdc-fab {
            margin-inline-start: $inset-fab-padding;
          }
        }

        &:last-child {
          @include inset-color(
            theme.$primary,
            calc(
              100% -
                (
                  $section-padding-horizontal + $inset-fab-padding +
                    math.div($fab-diameter, 2)
                )
            ),
            $query
          );

          .mdc-fab {
            margin-inline-end: $inset-fab-padding;
          }
        }

        &.smui-paper--color-secondary {
          @include inset-color(theme.$secondary, 50%, $query);

          &:first-child {
            @include inset-color(
              theme.$secondary,
              $section-padding-horizontal + $inset-fab-padding +
                math.div($fab-diameter, 2),
              $query
            );
          }

          &:last-child {
            @include inset-color(
              theme.$secondary,
              calc(
                100% -
                  (
                    $section-padding-horizontal + $inset-fab-padding +
                      math.div($fab-diameter, 2)
                  )
              ),
              $query
            );
          }
        }
      }
    }
  }

  .smui-bottom-app-bar--fixed-adjust {
    padding-bottom: $section-height;
  }

  .smui-bottom-app-bar--fixed-adjust,
  .smui-bottom-app-bar--standard-adjust {
    .mdc-snackbar {
      transform: translateY(
        calc((-1 * $section-height) - var(--smui-bottom-app-bar--fab-offset, 0))
      );
    }

    &.smui-bottom-app-bar--with-fab {
      .mdc-snackbar {
        transform: translateY(
          calc(
            (-1 * ($section-height + math.div($fab-diameter, 2))) - var(
                --smui-bottom-app-bar--fab-offset,
                0
              )
          )
        );
      }
    }
  }

  /*
  "What the fuck is this nonsense?" (I hear you asking after reading the
  following styles.)
  
  That's a great question.

  In Google Chrome (the worst browser now that IE is dead), the background style
  on the bar sections doesn't get applied, so the bar is... just transparent.
  Super weird. BUUUT, if an animation runs inside the bar (like a ripple on
  button click), the background is rendered again.

  "Well why not just run the animation once on component load?"

  Also a great quesiton.

  Even if the background is rendered, if it is scrolled *down* to below the
  fold, then scrolled back into view, it will be transparent again.

  "Won't this have an impact on power consumption/battery life?"

  Yes.
  */
  @supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and
    (not (-moz-appearance: none)) {
    // ^ That supports query makes this only apply to Chromium based
    // browsers. (Chrome, Edge, Brave, etc.)
    .smui-bottom-app-bar.smui-bottom-app-bar--standard
      > .smui-bottom-app-bar__section::after,
    .smui-bottom-app-bar.smui-bottom-app-bar--fixed
      > .smui-bottom-app-bar__section::after {
      display: block;
      content: ' ';
      position: absolute;
      bottom: 0;
      right: 0;
      height: 10px;
      width: 10px;
      pointer-events: none;
      background-color: #000;
      opacity: 0;
      animation: 60s linear 0s infinite chrome-fix;
    }
    @keyframes chrome-fix {
      0% {
        bottom: 0;
      }
      50% {
        bottom: $section-height - 10px;
      }
      100% {
        bottom: 0px;
      }
    }
  }
}

@mixin inset-color($color, $xpos, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  @include feature-targeting.targets($feat-color) {
    background: radial-gradient(
      ($fab-diameter + ($inset-fab-padding * 2))
        ($fab-diameter + ($inset-fab-padding * 2)) at $xpos
        var(--smui-bottom-app-bar--fab-offset, 0px),
      rgba(0, 0, 0, 0)
        ((math.div($fab-diameter, 2) + $inset-fab-padding) * 0.99),
      $color ((math.div($fab-diameter, 2) + $inset-fab-padding) * 1.01)
    );
  }
}
